<template>
	<view class="msg-list">
		<!-- 列表项 -->
		<view class="msg-list-item" v-for="(item,index) in dataList" :key="item.id" @tap="showMessageInfoAction(item)">
			<!-- 时间 -->
			<view class="msg-list-item-title">
				<text class="msg-list-item-title-text">{{item.pushDate}}</text>
			</view>
			<!-- 内容区域 -->
			<view class="msg-list-item-content-box">
				<view class="msg-list-item-content-text-box">
					<text>{{item.title}}</text>
					<text>{{item.content}}</text>
				</view>
				<view class="msg-list-item-content-box-line"></view>
				<view class="msg-list-item-bottom-box">
					<text>查看详情</text>
					<image class="msg-list-item-bottom-box-icon" src="/static/right_gray_icon.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view style="padding: 30rpx 0;">
			<u-loadmore :status="loadStatus" :fontSize="14" :iconSize="16" loadingIcon="semicircle" loadmoreText="点击或上拉加载更多" v-if="dataList.length > 0" @loadmore="loadData(false)"></u-loadmore>
		</view>
		<xh-empty :show="dataList.length == 0"></xh-empty>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad, onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
	import { getMessageList } from '@/config/api.js'
	import { kFirstPage, kPageCount } from '@/config/config'
	
	//消息列表数据
	const dataList = ref([])
	//当前页
	const page = ref(1)
	///上拉加载状态
	const loadStatus = ref('loadmore')
	//页面加载时
	onLoad(()=>{
		loadData()
	})
	//下拉筛选
	onPullDownRefresh(()=>{
		loadData()
	})
	//上拉加载
	onReachBottom(()=>{
		if(loadStatus.value == 'nomore'){
			return
		}
		loadStatus.value = 'loading'
		loadData(false)
	})
	//消息详情
	const showMessageInfoAction = (item)=>{
		uni.$u.route({
			url:'/pages/my/message/message-info',
			params:item
		})
	}
	//加载数据
	const loadData = (isRefresh = true) => {
		let currentPage = page.value
		if (isRefresh) {
			currentPage = 1
		} else {
			currentPage = page.value + 1
		}
		getMessageList(currentPage).then(res=>{
			uni.stopPullDownRefresh()
			loadStatus.value = currentPage >= res.page.totalPages ? 'nomore' : 'loadmore'
			if(isRefresh){
				dataList.value = []
				page.value = kFirstPage
				dataList.value = res.result
			}
			else{
				page.value = currentPage
				dataList.value = [...dataList.value,...res.result]
			}
		}).catch(()=>{
			loadStatus.value = 'loadmore'
			uni.stopPullDownRefresh()
		})
	}
</script>

<style lang="scss" scoped>
.msg-list{
	padding: 0 30rpx 30rpx;
	.msg-list-item-title{
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: $xh-title-color;
		font-size: 28rpx;
	}
	.msg-list-item-content-box{
		background-color: white;
		border-radius: 25rpx;
		.msg-list-item-content-text-box{
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			text:nth-of-type(1){
				font-size: 32rpx;
			}
			text:nth-of-type(2){
				font-size: 28rpx;
				color: $xh-color-606266;
				margin-top: 30rpx;
			}
		}
		.msg-list-item-content-box-line{
			background-color: $xh-line-color;
			height: 1px;
			transform: scaleY(0.5);
		}
		.msg-list-item-bottom-box{
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			color: $xh-subtitle-color;
			font-size: 30rpx;
			.msg-list-item-bottom-box-icon{
				width: 24rpx;
				height: 24rpx;
			}
		}
	}
}
</style>
